<template>
  <div class="box">
    <div class="b1">
      <van-search
        v-model="searchVal"
        :placeholder="$t('common.sousuo')"
        class="search"
        type="text"
        :clearable="false"
      />
    </div>
    <div class="b2">
      <van-tabs v-model="active" animated swipeable>
        <van-tab :title="$t('common.zixuan')">
          <div v-if="myList.length">
            <div class="cxbox">
              <div class="cx1" @click="handleChangePrarms(0)">
                <span class="cx-font"
                  >{{ $t("common.mingcheng") }}/{{
                    $t("common.chengjiaoliang")
                  }}</span
                >
                <img class="cx-img" :src="handleImgSide(0)" alt="" />
              </div>
              <div class="cx2">
                <div
                  class="cx1"
                  style="margin-right: 6vw"
                  @click="handleChangePrarms(1)"
                >
                  <span class="cx-font">{{ $t("common.zuixinjia") }}</span>
                  <img class="cx-img" :src="handleImgSide(1)" alt="" />
                </div>
                <div class="cx1" @click="handleChangePrarms(2)">
                  <span class="cx-font">{{ $t("common.zhangdie") }}</span>
                  <img class="cx-img" :src="handleImgSide(2)" alt="" />
                </div>
              </div>
            </div>
            <div class="ubox">
              <div
                class="mli"
                v-for="(item, i) in myList"
                :key="item.symbolId"
                @click="goKline(item)"
              >
                <SymbolItem :detail="item" :colorText="mycolorArr[i]" />
              </div>
            </div>
          </div>
          <div v-if="!myList.length && firstIndex == 2 && searchVal==''">
            <div class="title">
              <p>{{ $t("long.xuanzebizhong") }}</p>
            </div>
            <div class="contentZ">
              <div
                class="left"
                v-for="(item, index) in allOSList"
                :key="index"
                @click="optional(item.symbolId)"
              >
                <div class="left-a">
                  <p class="p1">
                    {{
                      item.symbolName.substring(0, item.symbolName.length - 4)
                    }}
                  </p>
                  <p class="p2">/</p>
                  <p class="p3">USDT</p>
                </div>
                <img
                  v-show="optionalList.includes(item.symbolId)"
                  src="../assets/images/language.png"
                  alt=""
                />
              </div>
            </div>
            <van-button type="info" class="van-btn" @click="addoptional">{{
              $t("long.tianjiazhizixuan")
            }}</van-button>
          </div>
        </van-tab>
        <van-tab :title="$t('common.quanbu')">
          <div class="cxbox">
            <div class="cx1" @click="handleChangePrarms(0)">
              <span class="cx-font"
                >{{ $t("common.mingcheng") }}/{{
                  $t("common.chengjiaoliang")
                }}</span
              >
              <img class="cx-img" :src="handleImgSide(0)" alt="" />
            </div>
            <div class="cx2">
              <div
                class="cx1"
                style="margin-right: 6vw"
                @click="handleChangePrarms(1)"
              >
                <span class="cx-font">{{ $t("common.zuixinjia") }}</span>
                <img class="cx-img" :src="handleImgSide(1)" alt="" />
              </div>
              <div class="cx1" @click="handleChangePrarms(2)">
                <span class="cx-font">{{ $t("common.zhangdie") }}</span>
                <img class="cx-img" :src="handleImgSide(2)" alt="" />
              </div>
            </div>
          </div>
          <div class="ubox">
            <div
              class="mli"
              v-for="(item, i) in allList"
              :key="item.symbolId"
              @click="goKline(item)"
            >
              <SymbolItem :detail="item" :colorText="allcolorArr[i]" />
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { createSocket } from "../common/_websocket";
import SymbolItem from "../components/symbol-item.vue";

export default {
  components: {
    SymbolItem,
  },
  data() {
    return {
      firstIndex: 1,
      webSocket: createSocket(),
      active: 0,
      searchVal: "",
      oldPrams: ["optionalSymbol", "0", "3", "1"],
      myList: [],
      allList: [],
      allOSList: [],
      tokenColorArr: [],
      mycolorArr: [],
      allcolorArr: [],
      twoParams: [3, 0],
      chooseParams: ["no", "no", "no"],
      optionalList: [],
    };
  },
  activated() {
    this.firstIndex = 1;
    this.socketConnect();
    this.getOptionSymbolList();
  },
  destroyed() {
    this.webSocket.close();
  },
  deactivated(){
    this.webSocket.close();
  },
  watch: {
    myList(val, oldVal) {
      this.handlePriceColor(val, oldVal, "my");
    },
    allList(val, oldVal) {
      this.handlePriceColor(val, oldVal, "all");
    },
    active(val) {
      this.searchVal = "";
      this.chooseParams = ["no", "no", "no"],
      this.twoParams = [3,0]
      this.getList();
    },
  },
  methods: {
    async getOptionSymbolList() {
      const ret = await this.$http({
        url: "/contract/contractOptionalSymbol/list",
        method: "post",
        data: {
          orderName: null, //名称排序 0 升序 1 降序  null 不排序
          orderSumPrice: 1, //成交量排序 0 升序 1 降序  null 不排序
          orderLastPrice: null, //最新价排序 0 升序 1 降序  null 不排序
          orderRiseAndFallRange: null, //涨跌幅排序 0 升序 1 降序  null 不排序
          type: "recommend", //查询类型  是否查询当前登陆人所选的币对 ，false -> 查全部
        },
      });
      if (ret.data.code === 0) {
        this.allOSList = ret.data.data;
        this.allOSList.forEach((e) => {
          this.optionalList.push(e.symbolId);
        });
      }
    },
    async addoptional() {
      for (let ite of this.optionalList) {
        const ret = await this.$http({
          url: "/contract/contractOptionalSymbol/batch",
          method: "post",
          data: [{ symbolId: ite }],
        });
        if (ret.data.code === 0) {
          console.log(ret);
        }
      }
    },
    optional(oid) {
      if (this.optionalList.indexOf(oid) !== -1) {
        this.optionalList.splice(this.optionalList.indexOf(oid), 1);
      } else {
        this.optionalList.push(oid);
      }
    },
    goKline({ symbolId, symbolName }) {
      this.$router.push({ path: "/kline", query: { symbolId, symbolName } });
    },
    handleChangePrarms(index) {
      if (this.chooseParams[index] == "no") {
        this.chooseParams[index] = "up";
      } else if (this.chooseParams[index] == "up") {
        this.chooseParams[index] = "down";
      } else {
        this.chooseParams[index] = "no";
      }
      this.twoParams = [
        this.chooseParams[index] == "no" ? 3 : index,
        this.chooseParams[index] == "down" ? 0 : 1,
      ];
      this.getList();
    },
    handleImgSide(index) {
      let val = this.chooseParams[index];
      let imgUrl = "";
      if (val == "no") {
        imgUrl = require("../assets/images/jjh.png");
      } else if (val == "up") {
        imgUrl = require("../assets/images/jjh1.png");
      } else if (val == "down") {
        imgUrl = require("../assets/images/jjh2.png");
      }
      return imgUrl;
    },
    handlePriceColor(val, oldVal, type) {
      try {
        if (type == "my") {
          val.forEach((v, i) => {
            if (+v.lastPrice > +oldVal[i].lastPrice) {
              this.mycolorArr[i] = "more";
            } else if (+v.lastPrice < +oldVal[i].lastPrice) {
              this.mycolorArr[i] = "kong";
            } else if (+v.lastPrice == +oldVal[i].lastPrice) {
              this.mycolorArr[i] = "baise";
            }
          });
        } else {
          val.forEach((v, i) => {
            if (+v.lastPrice > +oldVal[i].lastPrice) {
              this.allcolorArr[i] = "more";
            } else if (+v.lastPrice < +oldVal[i].lastPrice) {
              this.allcolorArr[i] = "kong";
            } else if (+v.lastPrice == +oldVal[i].lastPrice) {
              this.allcolorArr[i] = "baise";
            }
          });
        }
      } catch (error) {
        //
      }
    },
    handleSumPrice(val) {
      if (+val >= 100000000) {
        let n = Math.floor((+val / 100000000) * 100) / 100;
        return n + this.$t("long.yi");
      } else if (+val >= 10000) {
        let n = Math.floor((+val / 10000) * 100) / 100;
        return n + this.$t("long.wan");
      } else {
        return +val;
      }
    },
    getList() {
      this.webSocket.websocket.send(
        JSON.stringify({
          type: "unsubscribe", // 查询消息类型，固定值
          params: this.oldPrams,
        })
      );
      this.webSocket.websocket.send(
        JSON.stringify({
          type: "subscribe", // 查询消息类型，固定值
          params: [
            "optionalSymbol",
            this.active == 0 ? "optional" : "all",
            ...this.twoParams,
          ],
        })
      );
      this.oldPrams = [
        "optionalSymbol",
        this.active == 0 ? "optional" : "all",
        ...this.twoParams,
      ];
    },
    socketConnect() {
      this.webSocket.init({
        url: `/contract/ws/info`,
        onopen: (msg, data) => {
          this.getList();
        },
        onmessage: (data) => {
          let zdata = JSON.parse(data);
          if (zdata.params[1] == "all") {
            let allList = zdata.data.map((v) => {
              v.sumPrice = this.handleSumPrice(v.sumPrice);
              v.riseAndFallRange = (+v.riseAndFallRange).toFixed(2);
              return v;
            });
            if (this.searchVal) {
              this.allList = allList.filter((v) =>
                v.symbolName.includes(this.searchVal.toUpperCase())
              );
            } else {
              this.allList = allList;
            }
          } else {
            let myList = zdata.data.map((v) => {
              v.sumPrice = this.handleSumPrice(v.sumPrice);
              v.riseAndFallRange = (+v.riseAndFallRange).toFixed(2);
              return v;
            });
            if (this.searchVal) {
              this.myList = myList.filter((v) =>
                v.symbolName.includes(this.searchVal.toUpperCase())
              );
            } else {
              this.myList = myList;
            }
          }
          if (this.firstIndex == 1) {
            if (this.myList.length == 0) {
              this.active = 1;
            } else {
              this.active = 0;
            }
          }
          this.firstIndex = 2;
        },
        onclose: (data) => {
          console.log(data);
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.b1{
  position: fixed;
  top:0;
  left:0;
  z-index: 999;
}
.box{
  padding-top:14vw;
}
.search {
  height: 9.6vw;
  background: #090A1B;
  z-index: 2;
}

.van-search__content {
  background-color: rgba(45, 47, 59, 100) !important;
  left: 0.5vw !important;
  position: relative !important;
  padding-right: 0.8vw !important;
}

::v-deep .van-field__left-icon {
  margin-right: 2.5vw;
  width: 4.8vw;
  height: 4.8vw;
  color: rgba(135, 139, 151, 100);
}
::v-deep .van-icon {
  margin-right: 2.5vw;
  width: 4.8vw;
  height: 4.8vw;
  color: rgba(135, 139, 151, 100);
}
.van-search {
  width: 92vw;
  height: 14vw;
  // border-radius: 1.3vw !important;
  // background: rgba(45, 47, 59, 100) !important;
  position: sticky;
  top: 0;
  padding: 0 4vw 0 !important;
}
::v-deep .van-tab__pane-wrapper {
  min-height: calc(100vh - 39.5vw);
  background: #090A1B;
}
::v-deep .van-tabs__nav {
  width: 36vw;
  background-color: #090A1B;
}
::v-deep .van-tab {
  height: 5.3vw;
  color: rgba(135, 139, 151, 100);
  font-size: 3.7vw;
  top: 4.8vw;
  left: 3.8vw;
  justify-content: center;
  margin-right: 4.3vw;
  flex: none;
}
::v-deep .van-field__control {
  color: #fff !important;
}
::v-deep .van-tab--active {
  color: rgba(255, 255, 255, 100);
}
::v-deep .van-tabs__line {
  background-color: rgba(10, 122, 255, 100);
  width: 5.3vw;
  height: 0.53vw;
  text-align: center;
  border-radius: 0.5vw;
}
::v-deep .van-tab__text--ellipsis {
  font-size: 3.73vw;
}
::v-deep .van-tabs--line .van-tabs__wrap {
  width: 16vw;
  overflow: visible;
  margin-left: 1.4vw;
}
.cxbox {
  display: flex;
  height: 12vw;
  justify-content: space-between;
  align-items: center;
  padding: 0 3vw;
  .cx1 {
    display: flex;
    align-items: center;
    .cx-font {
      color: #8992AE;
      font-size: 3.2vw;
    }
    .cx-img {
      width: 4vw;
    }
  }
  .cx2 {
    display: flex;
  }
}
.title {
  height: 14vw;
  p {
    position: relative;
    top: 8vw;
    text-align: left;
    left: 4vw;
    font-size: 3.2vw;
    color: rgb(255, 255, 255);
  }
}
.contentZ {
  // height: 16vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 4vw;
  .left {
    height: 14.5vw;
    width: 44vw;
    // margin-left: 4vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgb(109, 107, 107);
    .left-a {
      display: flex;
      align-items: center;
      .p1 {
        font-size: 3.7vw;
        color: rgb(255, 255, 255);
      }
      .p2 {
        font-size: 3.2vw;
        margin: 0 0.5vw;
        color: #8992AE;
      }
      .p3 {
        font-size: 3.2vw;
        color: #8992AE;
      }
    }
    img {
      width: 4.8vw;
      height: 4.8vw;
      font-weight: 100;
    }
  }
  .right {
    height: 14.5vw;
    width: 44vw;
    margin-right: 4vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgb(109, 107, 107);
    .right-a {
      display: flex;
      align-items: center;
      .p1 {
        font-size: 3.7vw;
        color: rgb(255, 255, 255);
      }
      .p2 {
        font-size: 3.2vw;
        margin: 0 0.5vw;
        color: #8992AE;
      }
      .p3 {
        font-size: 3.2vw;
        color: #8992AE;
      }
    }
    img {
      width: 4.8vw;
      height: 4.8vw;
    }
  }
}
.van-btn {
  margin-top: 10vw;
  width: 50vw;
  border-radius: 0.8vw;
}
</style>